{% extends "DataMinerBundle:Page:layout.html.twig" %}

{% block documentReady %}
    {{ parent() }}
    var refreshId = setInterval(function() {
       $("#sellerContainer").fadeOut().load('{{ url('_sellers_table') }}').fadeIn();
    }, 10000);
    var refreshId2 = setInterval(function() {
       $("#farmerContainer").load('{{ url('_farmers_table') }}');
    }, 10000);
    $.ajaxSetup({ cache: false });    
    
            $.ajax({
             url: '{{ path('character_timeline', {'_format':"json"}) }}',

             success: function( rep ) {
               console.log("Success loading JSON");
               
               $(rep).each(function(index, el) {
                        el.start = new Date(el.start);
                        el.end = new Date(el.end);
                        }
                    );
                data = rep;
                drawVisualization();
             },
             error: function (xhr, ajaxOptions, thrownError) {
                 alert(xhr.statusText);
                 alert(thrownError);
             }   
           });

           
       	$('.timeLineToggle').click(function(){
            $("#timelineContainer").slideToggle();
	});

{% endblock documentReady %}

{% block content %}
    <H1>Sellers</H1> 
    <div id = "sellerContainer">
        {% render url('_sellers_table') %}
    </div>
{% endblock %}

{% block content2 %}
        <H1>Farmers</H1> 
        <div id = "farmerContainer">
        {% render url('_farmers_table') %}
        </div>
{% endblock %}


{% block timeline %}
<div id="mytimeline"></div>
<script>
            var timeline;
        var data;

        // Called when the Visualization API is loaded.
        function drawVisualization() {
            // Create a JSON data table

            // specify options
            today = new Date();
            yesterday = new Date(); 
            yesterday.setDate(today.getDate()-1);
            var options = {
                          width:  "100%", 
                        //height: "300px",
                        height: "auto",
                        layout: "box",
                        editable: true,
                        eventMargin: 5,  // minimal margin between events 
                        eventMarginAxis: 0, // minimal margin beteen events and the axis
                        showMajorLabels:false,
                        showMinorLabels: true,
                        axisOnTop: false,
                        // groupsWidth : "200px",
                        groupsChangeable : true,
                        groupsOnRight: true,
                        showCustomTime : true,
                        showNavigation : true,
                        start : yesterday,
                        end : today
                        };


            // Instantiate our timeline object.
            timeline = new links.Timeline(document.getElementById('mytimeline'));

            function onRangeChanged(properties) {
                console.log("Range Changed");
                $.each($('.timeline-event-content'), function() {
                    console.log( this.innerHTML );
                });
/*                document.getElementById('info').innerHTML += 'rangechanged ' +
                        properties.start + ' - ' + properties.end + '<br>';
*/              $(".timeline-event-content").attr("title", function() {
                    return this.innerHTML;
                });
                $(".timeline-event-content").tipTip({
                         content : "",
                         maxWidth: "auto", 
                         edgeOffset: 2,
                         defaultPosition : "top",
                         delay : 100
                        });
            }
            
            function onReady(properties) {
            }
            
            
            links.events.addListener(timeline, 'rangechanged', onRangeChanged);
            links.events.addListener(timeline, 'ready', onReady);

            // Draw our timeline with the created data and options
            timeline.draw(data, options);
        };

</script>    
{% endblock %}
